<template name="addCard">
<view class="bgzd">
	<view class="form">
		<view class="form_top">
			<text>客户预约</text>
			<image @click="close" src="/static/img/none_close.png"></image>
		</view>
		<view class="view_input1">
		    <view class="view_input_title1">项目名称:</view>
			<picker class="view_input_input1" @change="bindCardIndex" :value="cardIndex" 
			:range="card" v-if="card.length > 0"
			range-key="card_name">
				<view>{{card[cardIndex]['card_name']}}</view>
			</picker>
		</view>
		<view class="view_input1">
			<view class="view_input_title1">预约日期:</view>
			<picker class="view_input_input1" mode="date" :value="date" @change="bindDate">
				<view>{{form.date ? form.date : '请选择日期'}}</view>
			</picker>
		</view>
		<view class="view_input1">
			<view class="view_input_title1">预约时间:</view>
			<picker class="view_input_input5" @change="bindTimes" :value="stimeIndex"
			:range="stime">
				<view>{{stime[stimeIndex]}}</view>
			</picker>
			--
			<picker class="view_input_input5" @change="bindTimee" :value="etimeIndex"
			:range="etime">
				<view>{{etime[etimeIndex]}}</view>
			</picker>
		</view>
		<view class="view_input1" v-if="oaRole == 1 || oaRole == 3">
			<view class="view_input_title1">选择美容师:</view>
			<picker class="view_input_input1" @change="bindUser" :value="userIndex"
			:range="userArr" v-if="userArr.length > 0"
			range-key="realname">
				<view>{{userArr[userIndex]['realname']}}</view>
			</picker>
		</view>
		
		<button v-if="addTrue" @click="add" class="strue">提交</button>
	</view>
</view>
</template>
<script>
import request from '@/util/request.js'
export default {
	name: "addMark",
	//属性
	props:['id','card'],
	data() {
		return {
			oaRole:0,
			addTrue:true,
			form:{
				card_id:0,
				date:'',
				stime:'',
				etime:''
			},
			date:'',
			cardIndex:0,
			userArr:[],
			userIndex:0,
			stime:['9:00','9:30','10:00','10:30','11:00','11:30','12:00','12:30',
			'13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00',
			'17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00'],
			stimeIndex:0,
			etime:['9:00','9:30','10:00','10:30','11:00','11:30','12:00','12:30',
			'13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00',
			'17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00'],
			etimeIndex:0
		}
	},
	//组件生命周期
	created:function(e){
		this.oaRole = uni.getStorageSync('oaRole')
		this.form.card_id = this.card[0]['card_id']
		this.form.order_id = this.card[0]['id']
		if(this.oaRole == 2){
			this.form.user_id = uni.getStorageSync('uid')
		}else{
			if(this.userArr.length == 0){
				this.getUser()
			}
		}
		let len = this.etime.length - (this.stime.length - this.stimeIndex - 1);
		this.etime.splice(0,len)
		this.form.stime = '9:00'
		this.form.etime = '9:30'
	},
	methods:{
		close:function(){
			this.$emit('func',{'type':0,'model':'addMarkShow'})
		},
		bindCardIndex:function(e){
			this.cardIndex = e.detail.value
			this.form.order_id = this.card[e.detail.value].id
			this.form.card_id = this.card[e.detail.value].card_id
		},
		bindUser:function(e){
			this.userIndex = e.detail.value
			this.form.user_id = this.userArr[e.detail.value].uid
		},
		bindDate:function(e){
			this.form.date = e.detail.value
		},
		bindTimes:function(e){
			this.stimeIndex = e.detail.value
			this.form.stime = this.stime[e.detail.value]
			this.form.etime = this.stime[e.detail.value + 1]
			let len = this.etime.length - (this.stime.length - this.stimeIndex - 1);
			this.etime.splice(0,len)
		},
		bindTimee:function(e){
			this.etimeIndex = e.detail.value
			this.form.etime = this.etime[e.detail.value]
		},
		getUser:function(){
			var data = {
				oa_id:uni.getStorageSync('oa_id')
			}
			var that = this
			request({
				url: 'manage/user/all',
				method: 'get',
				data:data,
				success: (res) => {
					that.userArr = res.data.data
					that.form.user_id = res.data.data[0].uid
				},
			})
		},
		add:function(){
			if(!this.form.date){
				uni.showToast({
					title: '请选择预约日期!!',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			if(!this.form.stime || !this.form.etime){
				uni.showToast({
					title: '请选择开始和结束时间!!!',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			this.form.oa_id = uni.getStorageSync('oa_id')
			this.form.member_id = this.id
			var that = this
			//this.addTrue = false
			request({
				url: 'manage/mark/add',
				method: 'post',
				data:this.form,
				success: (res) => {
					if(res.data.code == 1){
						uni.showToast({
							title: '预约成功!!',
							icon: "success", 
							position:'bottom',
						});
						that.$emit('func',{'type':1,'model':'addMarkShow'})
					}else{
						uni.showToast({
							title:res.data.msg,
							icon: "none", 
							position:'bottom',
						});
					}
				},
			})
		},
	}
}
</script>
<style>
.bgzd{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	z-index:999;
	padding-top:40%;
	padding-left:5%;
}
.form{
    padding-top:20rpx;
    width:90%;
    padding-bottom: 20rpx;
    background:#FFFFFF;
    position: fixed;
    z-index:9999;
	border-radius: 40rpx;
	padding-bottom: 50rpx;
}
.form_top{
    font-weight:bold;
    font-size:20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
	padding:15rpx 15rpx 15rpx 15rpx;
}
.form_top image{
    width:35rpx;height:35rpx;
    margin-right: 20rpx;
}
.strue{
    width:90%;height:70rpx;line-height:70rpx;
    background:#ff861a;color:#fff;
	margin-top: 20rpx;
	border-radius: 30rpx;
}
.view_input_input5{
	width:30%;
	text-align: center;
}
</style>